<template>
  <div class="home-container">
    <a-card title="tds-app-main 主应用" :bordered="false">
      <template #extra>
        <a-tag color="red">Vue3 + Vite + qiankun</a-tag>
      </template>
      
      <a-row :gutter="16">
        <a-col :span="12">
          <a-statistic
            title="子应用数量"
            :value="subAppCount"
            :value-style="{ color: '#1890ff' }"
          >
            <template #suffix>
              <a-icon type="appstore" />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="12">
          <a-statistic
            title="运行状态"
            :value="'主应用运行中'"
            :value-style="{ color: '#52c41a' }"
          />
        </a-col>
      </a-row>
      
      <a-divider />
      
      <a-space direction="vertical" style="width: 100%">
        <a-alert
          message="主应用信息"
          description="这是一个基于 Vue3 + Vite + qiankun 的微前端主应用"
          type="info"
          show-icon
        />
        
        <a-button type="primary" @click="goToSubApp">
          <template #icon>
            <AppstoreOutlined />
          </template>
          访问子应用
        </a-button>
        
        <a-button @click="showSubAppInfo">
          <template #icon>
            <InfoCircleOutlined />
          </template>
          查看子应用信息
        </a-button>
      </a-space>
      
      <a-divider />
      
      <a-descriptions title="子应用列表" bordered size="small">
        <a-descriptions-item label="应用名称">tds-ec-web</a-descriptions-item>
        <a-descriptions-item label="技术栈">Vue3 + Vite + Ant Design Vue</a-descriptions-item>
        <a-descriptions-item label="访问路径">/exp</a-descriptions-item>
        <a-descriptions-item label="运行端口">9092</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-badge status="success" text="已注册" />
        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<script setup>
import { message } from 'ant-design-vue'

const router = useRouter()

// 响应式数据
const subAppCount = ref(1)

// 方法
const goToSubApp = () => {
  router.push('/exp')
}

const showSubAppInfo = () => {
  message.info('子应用 tds-ec-web 已注册，可通过 /exp 路径访问')
}
</script>

<style lang="scss" scoped>
.home-container {
  .ant-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
</style> 